<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">商品信息</el-breadcrumb-item>
      <el-breadcrumb-item>商品详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 滚动条 -->
    <el-scrollbar style="height: 100%; margin-top: 1rem">
      <!-- 商品信息区域 -->
      <div>
        <el-row :gutter="5">
          <!-- 左侧商品图片 -->
          <el-col :span="10">
            <!-- 商品图片 -->
            <show></show>
          </el-col>
          <!-- 右侧商品详细信息 -->
          <el-col :span="14">
            <div>
              <!-- 商品名称 -->
              <span>{{ commodityList.commodityName }}</span>

              <!-- 店铺优惠、优惠价、原价 -->
              <el-card class="box-card1">
                <span style="color: #e4393c"
                  >店铺优惠：
                  <span class="price"> 购物满2件打8折，满3件7折</span>
                </span>
                <br />
                <span style="color: #e4393c"
                  >促销价：
                  <span class="price"
                    ><em>¥ </em>{{ commodityList.commodityPrices }}</span
                  >
                </span>
                <br />
                <span
                  >原价：
                  <span style="text-decoration: line-through"
                    ><em>¥ </em>99999</span
                  >
                </span>
              </el-card>

              <!-- 地址选择器 -->
              <div>
                <span>配送至</span>
                <!-- 全国省市县级联选择器 -->
                <el-cascader
                  v-model="selectCity"
                  :options="cityData"
                  :props="{
                    expandTrigger: 'hover',
                  }"
                  clearable
                  filterable
                ></el-cascader>
                <span style="font-size: 12px">有货 免运费</span>
              </div>

              <!-- 销量数据 -->
              <div style="margin-top: -0.5rem">
                <!-- 顶部分割线 -->
                <el-divider class="divider1"></el-divider>
                <div class="sales">
                  月销量<span style="color: rgb(255, 9, 62); margin: 20px">
                    1135</span
                  >
                  <el-divider direction="vertical"></el-divider>
                  累计销量<span style="color: rgb(255, 9, 62); margin: 20px">
                    8888</span
                  >
                  <el-divider direction="vertical"></el-divider>
                  累计评价<span style="color: rgb(255, 9, 62); margin: 20px">
                    6666</span
                  >
                </div>
                <!-- 底部分割线 -->
                <el-divider class="divider2"></el-divider>
              </div>

              <!-- 参数选择 -->
              <div
                style="margin-top: 20px"
                v-for="(param, i) in objArr"
                :key="i"
              >
                <span>{{ param.name }}</span>
                <el-radio-group
                  v-model="radioList[i]"
                  size="small"
                  v-for="(pChildren, index) in param.paramChildren.split(' ')"
                  :key="index"
                >
                  <el-radio :label="pChildren" border style="margin-left: 1rem">
                    {{ pChildren }}
                  </el-radio>
                </el-radio-group>
              </div>

              <!-- 购买数量 -->
              <div>
                <span>数量</span>
                <!-- 数量选择器 -->
                <el-input-number
                  size="mini"
                  v-model="num"
                  :min="1"
                  :max="commodityList.commodityStocks"
                  style="margin-top: 1rem; margin-left: 1rem"
                ></el-input-number>
                <!-- 库存 -->
                <span style="font-size: 12px">
                  库存 {{ commodityList.commodityStocks }}件</span
                >
              </div>

              <!-- 购物按钮 -->
              <div>
                <el-button
                  type="warning"
                  style="margin-top: 1rem; margin-left: 3rem"
                  @click="addShopping"
                  >加入购物车</el-button
                >
                <el-button
                  type="danger"
                  style="margin-top: 1rem; margin-left: 3rem"
                  @click="buyNow"
                  >立即购买</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 宝贝详情、全部评价、猜你喜欢 -->
      <div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content1">
              <el-tabs v-model="activeName">
                <el-tab-pane label="宝贝详情" name="first">
                  <goods-details />
                </el-tab-pane>
                <el-tab-pane label="全部评价" name="second"
                  ><goods-evaluate />
                </el-tab-pane>
                <el-tab-pane label="猜你喜欢" name="third">
                  <you-likes />
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
// 左侧图片区域
import Show from "./comImg.vue"
// 宝贝详情
import GoodsDetails from "./productDetails.vue"
// 猜你喜欢
import YouLikes from "./youLikes.vue"
// 全部评价
import GoodsEvaluate from "./evaluate.vue"
// 全国省市县
import cityData from '../assets/js/allcitydata'
export default {
  // 组件
  components: {
    // 宝贝详情
    GoodsDetails,
    // 猜你喜欢
    YouLikes,
    // 全部评价
    GoodsEvaluate,
    // 图片放大镜
    Show
  },
  data () {
    return {
      // 商品数据
      commodityList: {},
      // 全国省市县
      cityData,
      // tab栏默认选中宝贝详情
      activeName: "first",
      // 数量选择器双向数据绑定
      num: 1,
      // 参数选择
      radioList: [],
      // 商品分类三级Id
      cateId: '',
      // 商品id
      goodsId: '',
      // 用户id
      uId: '',
      // 地址选择器默认选择
      selectCity: ["福建省", "龙岩市", "新罗区"],
      // 商品参数
      objArr: [],
      // 随机生成的订单号
      form: {
        number: 0
      }
    }
  },
  // 钩子
  created () {
    // 从url中获取商品id
    this.goodsId = this.$route.query.id
    // 获取用户id
    this.uId = window.localStorage.getItem('userId')
    // 获取指定id的商品信息
    this.getCommodityList(this.goodsId)
    // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
    // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
    this.form.number = this.getProjectNum() + Math.floor(Math.random() * 100000)
  },
  // 方法
  methods: {
    // 获取商品列表
    async getCommodityList (goodsId) {
      const { data: res } = await this.$http.get('Commodities/id/' + goodsId)
      if (res.meta.status !== 200) {
        // 获取商品列表失败
        this.$message.error('商品列表获取失败！')
      } else {
        // 获取商品列表成功
        // 将返回的数据中的commodities商品列表赋值给commodityList
        this.commodityList = res.data.commodities
        // 将商品三级分类id抽取出来进行赋值保存
        this.cateId = this.commodityList.commodityTypeId.split(',')[2]
        // 获取商品参数列表
        this.getParamsData()
      }
    },
    // 获取商品参数列表
    async getParamsData () {
      const { data: res } = await this.$http.get(`CommodityParams/type/${this.cateId}`)
      if (res.meta.status !== 200) {
        // 失败
        this.$message.error('商品参数列表获取失败！')
      } else {
        // 成功
        this.paramList = res.data.commodityParams
        // 用于存放商品参数名称以及商品参数名称对应下的规格信息
        for (let index = 0; index < this.paramList.length; index++) {
          let obj = {}
          obj.radio = 'radio' + index
          obj.name = this.paramList[index].commodityParamName
          obj.paramChildren = this.paramList[index].paramChildren
          this.objArr.push(obj)
        }
      }
    },
    // 获取当前日期的方法(用于随机生成订单号)
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = String(Year)
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
    // 加入购物车
    async addShopping () {
      if (!this.uId) {
        this.$router.push('/login')
        this.$message.info('请先登录！')
      } else {
        // 判断是否选择了参数和送货地址
        if (this.radioList.length === 0) {
          // 没有选择参数
          this.$message.info('请选择商品参数！')
        } else if (this.selectCity.length === 0) {
          // 没有选择送货地址
          this.$message.info('请选择送货地址！')
        } else {
          // 往数据库发送请求,在购物车列表获取购物车表数据
          const { data: res } = await this.$http.post('ShoppingCarts', {
            // 用户id
            FromUserId: this.uId - 0,
            // 商品id
            CommodityId: this.goodsId - 0,
            // 商品名称
            CommodityName: this.commodityList.commodityName,
            // 商品价格
            CommodityPrice: this.commodityList.commodityPrices,
            // 商品数量
            CommodityNum: this.num,
            // 选中的参数
            CommodityParams: this.radioList.toString(),
            // 商品图片id
            CommodityImagesId: this.commodityList.commodityImagesId,
            // 送货地址
            CommodityAddress: this.selectCity.toString()
          })
          if (res.meta.status !== 200) {
            // 加入购物车失败
            this.$message.error('加入购物车失败！')
          } else {
            // 加入购物车成功
            this.$message.success('加入购物车成功！')
          }
        }
      }

    },
    // 立即购买
    async buyNow () {
      if (!this.uId) {
        this.$router.push('/login')
        this.$message.info('请先登录！')
      } else {
        const { data: res } = await this.$http.post('CommodityOrders', {
          // 用户id
          FromUserId: this.uId - 0,
          // 商品id
          CommodityInfo: this.goodsId,
          // 总金额(商品价格 * 购买数量)
          PaymentAmount: this.commodityList.commodityPrices * this.num,
          // 订单号
          OrderNumber: this.form.number
        })
        if (res.meta.status !== 200) {
          // 生成订单失败
          this.$message.error('生成订单失败！')
        } else {
          // 成功
          this.$message.success('生成订单成功！')
        }
        //跳转支付页面
        this.$router.push('/pay?id=' + res.data.id)
      }
    }
  }
}
</script>

<style scoped>
/* 店铺优惠、优惠价、原价 */
.box-card1 {
  margin-top: 1rem;
  width: 630px;
  background-color: #f3f3f3;
  color: rgb(15, 15, 15);
  line-height: 25px;
  display: flex;
  align-items: center;
}
/* 地址选择器 */
.el-cascader {
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* 销量信息 */
.sales {
  margin-left: 4rem;
  margin-top: -1rem;
  font-size: 10px;
}

/* 销量信息第一条分割线 */
.divider1 {
  width: 40rem;
}
/* 销量信息第二条分割线 */
.divider2 {
  width: 40rem;
  margin-top: 0.5rem;
}

/* 宝贝详情、全部评价、猜你喜欢 */
.grid-content1 {
  margin-top: 3rem;
}

/* ￥样式 */
em {
  font-style: normal;
  font-size: 16px;
  vertical-align: inherit;
}

/* 商品价格区域 */
.price {
  color: #f40;
  font-size: 20px;
}
</style>

<style>
/* 滚动条 */
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>